<template>
  <div class="menu-list-page">
    <div class="filter-bar">
      <el-input v-model="filter.name" placeholder="菜单名称" style="width: 180px; margin-right: 8px;" clearable />
      <el-input v-model="filter.component" placeholder="组件名" style="width: 180px; margin-right: 8px;" clearable />

      <el-button type="primary" @click="handleFilter" style="margin-right: 8px;">筛选</el-button>
      <el-button @click="resetFilter" style="margin-right: 8px;">重置</el-button>
      <el-button v-if="hasAddPermission" class="ml-auto" type="primary" @click="openForm()">新增菜单</el-button>
    </div>

    <el-table
      v-if="filteredMenuTree && filteredMenuTree.length"
      :data="filteredMenuTree"
      border
      style="width: 100%"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="ID" min-width="80">
        <template #default="scope">
          <span v-if="scope.row.parent_id === 0">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="菜单名称" min-width="90" />
      <el-table-column prop="path" label="接口地址" min-width="150" />
      <el-table-column prop="component" label="前端组件" min-width="100" />
      <el-table-column prop="icon" label="图标" min-width="60">
        <template #default="scope">
          <component v-if="scope.row.icon"
                     :is="scope.row.icon" class="icon-wrapper table-icon icon-cell-wrapper"
                     :style="{color: scope.row.hidden ? '#909399' : '#409EFF'}"/>
          <span v-else class="icon-placeholder">—</span>
        </template>
      </el-table-column>

      <el-table-column prop="order_num" label="排序" min-width="80">
        <template #default="scope">
          <el-input-number
            v-model="scope.row.order_num"
            :min="0"
            size="small"
            @change="handleFieldUpdate(scope.row)"
            style="width: 100px;"
          />
        </template>
      </el-table-column>

      <el-table-column prop="hidden" label="隐藏" min-width="50">
        <template #default="scope">
          <el-switch
            v-model="scope.row.hidden"
            :active-value="1"
            :inactive-value="0"
            @change="handleFieldUpdate(scope.row)"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180" fixed="right">
        <template #default="scope">
          <el-button v-if="hasEditPermission" size="small" @click="openForm(scope.row)">编辑</el-button>
          <el-button v-if="hasDeletePermission" size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <MenuForm
      v-model="formVisible"
      :form-data="currentFormData"
      @submit="handleFormSubmit"
    />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useFilterActions } from '@/services/useFilterActions'
import { useMenuFormActions, useMenuListData } from '@/services/auth/menu/menuApiService'
import MenuForm from '@/views/menu/MenuForm.vue'
import { useMenuStore } from '@/stores/menuStore'

const menuStore = useMenuStore()

// 权限控制（可替换为真实权限）
const hasAddPermission = true
const hasEditPermission = true
const hasDeletePermission = true

// 封装筛选条件组件
// 定义初始字段和筛选回调
const { filter, handleFilter, resetFilter } = useFilterActions(
  { name: '', component: '' },
  {
    onFilter: () => {},
    onReset: () => {}
  }
)

// 使用封装的数据过滤逻辑
const { filteredMenuTree } = useMenuListData(menuStore, filter)

// 监听筛选条件变化
onMounted(async () => {
  await refreshMenu()
})
// 获取菜单数据并更新 store
async function refreshMenu() {
  await menuStore.fetchMenu(true)
}

// 使用封装好的 UI 行为
const { formVisible, currentFormData, openForm, handleFormSubmit, handleDelete, handleFieldUpdate } = useMenuFormActions({
  onMenuChange: () => {
    // 这里可以添加额外的回调逻辑（如果需要）
    // 目前主要依赖 store 的自动更新
  }
})
</script>


<style scoped>
.ml-auto { margin-left: auto; }
.menu-list-page {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
}
.filter-bar {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
/* 图标容器 */
.icon-wrapper {
  display: block;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 20px; /* 保证最小高度 */
}
/* 关键样式 */
.icon-cell-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.table-icon {
  width: 45%;          /* 百分比宽度 */
  height: auto;        /* 保持宽高比 */
  max-width: 30px;     /* 防止过大 */
  display: block;      /* 消除行内元素间隙 */
  margin: 0 auto;      /* 水平居中 */

  font-size: 18px;
  vertical-align: middle;
  transform: translateY(1px); /* 微调垂直对齐 */
}
.table-icon:hover {
  background-color: rgba(64, 158, 255, 0.2);
  transform: translateY(1px);
}
/* 无图标时的占位符 */
.icon-placeholder {
  color: #c0c4cc;
  //font-size: 14px;
  line-height: 1;/* 保持行高一致 */
}

/* 深度调整 SVG 图标 */
:deep(.table-icon svg) {
  vertical-align: -0.15em; /* 微调对齐 */
  display: block; /* 消除 SVG 底部间隙 */
  margin: 0 auto; /* 水平居中 */
  width: 100% !important;    /* 继承父级宽度 */
  height: 100% !important;   /* 继承父级高度 */
}
</style>
